<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="24" class="">
            <div class="">总访问量</div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-col :span="2">
            <div class="card-container">
              <div class="card-name"></div>
              <div class="card-data">今天</div>
              <div class="card-data">昨天</div>
            </div>
          </el-col>
          <el-col :span="22">
            <el-row class="db-category-list">
              <el-col class="db-category-item" :class="{active:currentCategory==key}"
                      v-for="(category,key) in basicList"
                      :span="category.span" :xs="category.span*2" :md="category.spna"
                      :key="key"
              >
                <div>
                  <div class="card-name">{{category.name}}</div>
                  <div class="card-data">{{(category.data && category.data.length==2 && category.data[0])||0}}</div>
                  <div class="card-data">{{(category.data && category.data.length==2 && category.data[1])||0}}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="8" class="">
            <div class="">访问量数据</div>
          </el-col>
          <el-col :span="8" align="right">
          <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
          </el-col>
          <el-col :span="8" align="right">
            <el-date-picker v-model="form.time" type="daterange" align="right" unlink-panels range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            @change="summaryTimeChangeHandler"
                            :picker-options="pickerDayStep">
            </el-date-picker>
          </el-col>

        </el-row>

      </div>
      <div class="height-200">
        <el-table :data="tableData" border style="width:100%">
          <el-table-column
            prop="time"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="pv"
            label="浏览次数（PV）">
          </el-table-column>
          <el-table-column
            prop="uv"
            label="独立访客（UV）">
          </el-table-column>
          <el-table-column
            prop="ip"
            label="IP">
          </el-table-column>
          <el-table-column
            prop="newVisit"
            label="新独立访客">
          </el-table-column>
          <!--<el-table-column-->
          <!--prop="new"-->
          <!--label="访问次数">-->
          <!--</el-table-column>-->
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                         :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                         :layout="gridLayout" :total="tableData.total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {visitBasicApi, visitSummaryApi,exportFlowAmount} from '@/services/api/operationalflow';
  import {grid, pickerOption} from '@/build'

  export default {
    name: 'flow-amount',
    components: {},
    mixins: [grid, pickerOption],
    data() {
      // let times = _.toPeriod({
      //   start: [-1, 'days'],
      //   end: [0, 'days'],
      //   format: 'YYYY-MM-DD'
      // });
      // 本月时间本月1号至当前时间
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      return {
        currentCategory: undefined,
        basicList: [],
        tableData: [],
        form: {
          time: monthTime,
          proxy: undefined,
          domain: undefined
        },
        filters: {
          size: 20,
          page: 1,
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() +  86399999,
        },
        filterDateType: false
      }
    },
    computed: {},
    methods: {
      summaryTimeChangeHandler() {
        const {time} = this.form;
        const {page, size} = this.filters;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() +  86399999;
        }
        this.filters = {page, size, stime, etime, project: consts.PLATFROM_PREFIX}
        this.doGet({action: 'getGrid'});
      },
      //导出
      exportHandle() {
        let {stime, etime,page} = this.filters
        let ajaxData = {stime, etime,page}
        let filename = '访问量数据明细报表.csv';
        let header = ['时间', '浏览次数（PV）', '独立访客（UV）', 'IP', '新独立访客']
        let filterField = ['time', 'pv', 'uv', 'ip', 'newVisit']
        exportFlowAmount(ajaxData).then(([result, data]) => {
          if (result) {
            let exportData = this.responseFormatter(data);
            console.log(exportData)
            this.export2Excel(header, filterField, exportData, filename)

          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
      //格式化导出数据
      responseFormatter(data) {
        let arr = []
          for (let key in data) {
            arr.push(Object.assign({time: key}, data[key]))
          }
          arr = _.sortBy(arr, (item) => {
            return item.time;
          }).reverse();
          return arr
      },
    },
    mounted() {

      this.bindGet(visitBasicApi, 'basicList', {
        action: 'getVisitBasic',
        format: (data) => {
          // return data.list
          return {
            item1: {
              type: 1,
              key: 'item1',
              name: '浏览次数（PV）',
              span: 6,
              data: data.pv,
            },
            item2: {
              type: 2,
              key: 'item2',
              name: '独立访客（UV）',
              span: 6,
              data: data.uv,
            },
            item3: {
              type: 3,
              key: 'item3',
              name: 'IP',
              span: 6,
              data: data.ip,
            },
            item4: {
              type: 4,
              key: 'item4',
              name: '新独立访客',
              span: 6,
              data: data.new,
            },
            // item5: {
            //   type: 5,
            //   key: 'item5',
            //   name: '访问次数',
            //   span: 5,
            //   data: data.uv,
            // }
          }
        }
      });
      this.bindGet(visitSummaryApi, 'tableData', {
        format: (data) => {
          let arr = []
          for (let key in data) {
            arr.push(Object.assign({time: key}, data[key]))
          }
          arr = _.sortBy(arr, (item) => {
            return item.time;
          }).reverse();
          return arr
        },
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.doGet({action: 'getVisitBasic'});
      this.summaryTimeChangeHandler()
    }
  }
</script>
<style lang="scss" scoped>
  $border-color-1: #DCDFE6;

  .box-card {
    width: 100%;
    margin: 10px 0;
  }


  .db-category-list {
    border: 1px solid $border-color-1;
    overflow: hidden;
  }

  .db-category-item {
    height: 100px;
    padding: 10px;
    border-right: 1px solid $border-color-1;
    line-height: 16px;
    cursor: pointer;

    &:last-child {
      border-right: 0;
    }

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #e7e7e7;
      /*color: #fff;*/
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }


  .card-container {
    margin: 10px 0;
  }

  .card-name {
    height: 40px;
    text-align: center;
    flex: 0 1 50%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-data {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

</style>
